/**
 * @author Cator Vee  hi@catorv.com
 */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import Spinner from './Spinner'
import classnames from '../lib/classnames'

export default class Loading extends Component {
  constructor (props) {
    super(props)
    this.state = {showed: false}
  }

  componentDidMount () {
    this.timer = setTimeout(() => this.setState({showed: true}), 500)
  }

  componentWillUnmount () {
    clearTimeout(this.timer)
  }

  render () {
    let showed = this.state.showed
    return this.props.isLoading && ReactDOM.createPortal((
      <div className={classnames({
        scrim: true,
        'loading-view': true,
        'scrim-bg': showed
      })}>
        {showed && <Spinner />}
      </div>
    ), document.body)
  }
}

Loading.propTypes = {
  isLoading: PropTypes.bool.isRequired
}
